import './Scss/PartyNews.scss'
import { useState, useEffect } from 'react'
import { useBoolean, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'

import { PartyBuildingSwiper } from './SwiperTemp'

import { project } from '../../../../Common/Data'
import { FrontModalBox } from '../Modal'
const { imageUrl } = project[window.location.hostname]

export const PartyNews001 = () => {
    const [DataOne, setDataOne] = useState([])
    const [DataTwo, setDataTwo] = useState([])

    const [ModalState, { setTrue, setFalse }] = useBoolean(false)
    const [TableName, setTableName] = useState()
    const [Uuid, setUuid] = useState()

    const [OptionsCall, setOptionsCall] = useState()

    // type: 'Article',
    // classification: 'article001',

    const { runAsync: getInfoManageOne } = useRequest(Http, { manual: true, onSuccess: ({ list }) => setDataOne(list) })
    const { runAsync: getInfoManageTwo } = useRequest(Http, { manual: true, onSuccess: ({ list }) => setDataTwo(list) })

    useEffect(() => {
        getInfoManageOne({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid: 'f5e2ce53-e8f0-412e-8222-8a827fd13cfc', pageSize: 7 },
        })
        getInfoManageTwo({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid: 'f5e2ce53-e8f0-412e-8222-8a827fd14cfc', pageSize: 7 },
        })
    }, [getInfoManageOne, getInfoManageTwo])

    return (
        <div className="PartyNews001">
            <div>
                <img src={imageUrl + 'PartyA01.png'} alt="" />
                <div>
                    <div>
                        {DataOne.map(({ uuid, tableName, eventDate, fileType, currencyA }) => (
                            <div
                                key={uuid}
                                onClick={() => {
                                    if (fileType === 3) {
                                        window.open(currencyA)
                                    }
                                }}
                            >
                                <div>{tableName}</div>
                                <div>{eventDate}</div>
                            </div>
                        ))}
                    </div>
                    <div>
                        <PartyBuildingSwiper data={DataOne} />
                    </div>
                </div>
            </div>
            <div>
                <img src={imageUrl + 'PartyA02.png'} alt="" />
                <div>
                    <div>
                        {DataTwo.map(({ uuid, tableName, eventDate }) => (
                            <div
                                key={uuid}
                                onClick={() => {
                                    setTableName(tableName)
                                    setUuid(uuid)
                                    setTrue()
                                }}
                            >
                                <div>{tableName}</div>
                                <div>{eventDate}</div>
                            </div>
                        ))}
                    </div>
                    <div>
                        <PartyBuildingSwiper data={DataTwo} />
                    </div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
